<template>
	<view class="add">
		<view class="first">
			<view class="info" style="padding:24rpx 0 24rpx 24rpx;">
				<u-form :model="model" label-width="170" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item required :label-position="labelPosition" label="选择省市" prop="addr">

						<view @click="addrshow = true" class="line">

							<view class="inp">
								<view class="inpCont">
									<text class="really" v-if="model.addr">{{model.addr}}</text>
									<text v-else class="please">请选择</text>
								</view>
							</view>
							<view class="more">
								<image src="https://oss.6mate.cn/mini/narrow.png" mode=""></image>
							</view>
						</view>
					</u-form-item>
					<u-form-item required :label-position="labelPosition" label="手机号" prop="mobile">
						<view class="writeInfo">
							<u-input maxlength="11" :border="border" placeholder="请输入手机号" v-model="model.mobile" type="number">
							</u-input>
						</view>
					</u-form-item>
					<u-form-item required :label-position="labelPosition" label="真实姓名" prop="realName">
						<view class="writeInfo">
							<u-input maxlength="10" :border="border" placeholder="请输入真实姓名" v-model="model.realName"
								type="text">
							</u-input>
						</view>
					</u-form-item>

					<u-form-item required :label-position="labelPosition" label="微信号" prop="weiXin">
						<view class="writeInfo">
							<u-input maxlength="40" :border="border" placeholder="请输入微信号" v-model="model.weiXin" type="text"></u-input>
						</view>
					</u-form-item>


					<u-form-item required :label-position="labelPosition" label="性别" prop="gender">

						<view @click="actionGendersShow=true" class="line">
							<view class="inp">
								<view class="inpCont">
									<text class="really" v-if="model.genderLable">{{model.genderLable}}</text>
									<text v-else class="please">请选择</text>
								</view>
							</view>
							<view class="more">
								<image src="https://oss.6mate.cn/mini/narrow.png" mode=""></image>
							</view>
						</view>
						<!-- <view class="writeInfo">
							<u-radio-group shape="circle" v-model="model.gender">
								<u-radio v-for="(item, index) in sexlist" :key="index" :name="item.name">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view> -->
					</u-form-item>


					<u-form-item required :label-position="labelPosition" label="生日" prop="birthday">
						<view class="line">
							<view class="inp">
								<!-- {{endDate}}  {{pickerDate}}  {{startDate}} -->
								<gpp-date-picker @onCancel="onCancel" @onConfirm="onConfirm" :startDate="startDate"
									:endDate="endDate" :defaultValue="pickerDate">
									<view class="inpCont">

										<text class="really" v-if="model.birthday">{{model.birthday}}</text>
										<text v-else class="please">请选择</text>
									</view>
									<view class="more">
										<image src="https://oss.6mate.cn/mini/narrow.png" mode="">
										</image>
									</view>
								</gpp-date-picker>
							</view>

						</view>
					</u-form-item>

					<!-- <u-form-item required :label-position="labelPosition" label="生日" prop="birthday">
						<view class="writeInfo">
							<u-input :border="border" placeholder="请选择生日" v-model="model.birthday" type="text">
							</u-input>
						</view>
					</u-form-item> -->





					<u-form-item :label-position="labelPosition" label="邮箱">
						<view class="writeInfo">
							<u-input maxlength="40" :border="border" placeholder="请输入邮箱" v-model="model.email"
								type="text"></u-input>
						</view>
					</u-form-item>
					<!-- required prop="certificateTypeLable" -->
					<u-form-item :label-position="labelPosition" label="证件类型">
						<view @click="actioncertificateTypeLableShow=true" class="line">
							<view class="inp">
								<view class="inpCont">
									<text class="really"
										v-if="model.certificateTypeLable">{{model.certificateTypeLable}}</text>
									<text v-else class="please">请选择</text>
								</view>
							</view>
							<view class="more">
								<image src="https://oss.6mate.cn/mini/narrow.png" mode=""></image>
							</view>
						</view>
					</u-form-item>
					<!--required  prop="certificateNo" -->
					<u-form-item :label-position="labelPosition" label="证件号码">
						<view class="writeInfo">
							<u-input maxlength="40" :border="border" placeholder="请输入证件号码" v-model="model.certificateNo"
								type="text">
							</u-input>
						</view>
					</u-form-item>

					<u-form-item :label-position="labelPosition" label="联系地址">
						<view class="writeInfo">
							<u-input maxlength="50" :border="border" placeholder="请输入联系地址" v-model="model.address"
								type="text">
							</u-input>
						</view>
					</u-form-item>

					<view class="dif">
						<u-form-item label-position="top" label="备注">

							<view class="intro" style="margin-top: 0; margin-right:24rpx;">
								<view style="height: 132rpx;">
									<u-input style="width: 100%;" :border="false" :maxlength="300" :height="120"
										:auto-height="false" v-model="model.description" type="textarea" />
								</view>
								<view class="max">
									{{model.description.length}}/300
								</view>
							</view>
						</u-form-item>
					</view>


					<view class="photos">
						<view class="tit">
							<view class="left">
								<text>
									<text style="color: #FA4A53;" >*</text>
									微信二维码上传</text>
							</view>
						</view>
						<view class="">


							<u-upload :width="148" :height="148" maxCount="1" ref="uUpload2" :show-progress="false"
								:action="`https://api-test.sixbg.com/oss/file/upload`" :auto-upload="false"
								@on-uploaded="onuploaded2" @on-list-change="onchange2" @on-remove="onRemove2"
								:file-list="fileList2" @on-success="successUpload2"
								:form-data="{groupName :'coverImg'}">
							</u-upload>




							<!-- 	<u-upload :width="148" :height="148" maxCount="1" ref="uUpload" :show-progress="false"
								:action="`https://api-test.sixbg.com/oss/file/upload`" :auto-upload="true"
								@on-remove="onRemove2" :file-list="fileList2" @on-success="successUpload2"
								:form-data="{groupName :'coverImg'}">
							</u-upload> -->
						</view>

					</view>


					<view class="photos">
						<view class="tit">
							<view class="left">
								<text>附件上传</text>
							</view>
						</view>
						<view class="">


							<u-upload :width="148" :height="148" maxCount="3" ref="uUpload" :show-progress="false"
								:action="`https://api-test.sixbg.com/oss/file/upload`" :auto-upload="false"
								@on-uploaded="onuploaded" @on-list-change="onchange" @on-remove="onRemove1"
								:file-list="fileList1" @on-success="successUpload1"
								:form-data="{groupName :'coverImg'}">
							</u-upload>



							<!-- <u-upload :width="148" :height="148" maxCount="3" ref="uUpload" :show-progress="false"
								:action="`https://api-test.sixbg.com/oss/file/upload`" :auto-upload="true"
								@on-remove="onRemove1" :file-list="fileList1" @on-success="successUpload1"
								:form-data="{groupName :'coverImg'}">
							</u-upload> -->
						</view>

					</view>
				</u-form>
			</view>
			<view class="botBox">
				<view class="item1">
					<u-button :disabled="btnFlags && loadFlag2" shape="circle" type="error" @click="submit"
						:ripple="true" ripple-bg-color="#d7d8da">保存
					</u-button>
				</view>
			</view>
		</view>

		<u-select @confirm="certificateTypeLableConfirm" v-model="actioncertificateTypeLableShow"
			:list="actioncertificateTypeList"></u-select>
		<u-select v-model="addrshow" mode="mutil-column-auto" :list="addrList" @confirm="confirmAddr"></u-select>
		<!-- 性别 -->
		<u-select @confirm="GendersConfirm" v-model="actionGendersShow" :list="actionGendersList"></u-select>


	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	export default {

		data() {
			return {
				loadFlag2: false,
				loadFlag: false,
				btnFlags: false,
				startDate: dayjs().subtract(60, 'year').format('YYYY-MM-DD'),
				endDate: dayjs().subtract(18, 'year').format('YYYY-MM-DD'),
				pickerDate: (dayjs().year() - 30) + '-' + (dayjs().month() + 1) + '-' + dayjs().date(),

				// 性别
				actionGendersList: [],
				actionGendersShow: false,
				sexlist: [],

				nextInfo: null,
				firstStep: true, //调试完记得放开
				// firstStep: false,
				action: 'https://api-test.sixbg.com/oss/file/upload',

				errorType: ['message', 'toast'],
				labelPosition: 'left',
				actionSheetShow: false,
				showDate: false,

				actioncertificateTypeLableShow: false,
				addrshow: false,
				comShow: false,
				fileList11: [],
				fileList1: [],
				fileList22: [],
				fileList2: [],

				weiXinImageUrl: '',
				model: {
					id: "",
					addr: "",
					mallId: "", //所属省份
					storeId: '', //所属城市
					mobile: '', //手机号
					realName: "", //真实姓名
					weiXin: "", //微信号
					email: '', //邮箱
					certificateTypeLable: '',
					certificateType: '', //证件类型
					certificateNo: "", //证件号
					contractNo: "", //合同号
					address: "", //地址,
					description: '', //红娘备注
					genderLable: "",
					gender: '',
					birthday: ''
				},

				rules: {
					addr: [{
						required: true,
						message: '请选择选择省市',
						trigger: ['change', 'blur'],
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],

					realName: [{
						required: true,
						message: '请输入真实姓名',
						trigger: 'blur',

					}, {
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return this.$u.test.chinese(value);
						},
						message: '真实姓名只能是中文',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change', 'blur'],
					}],
					weiXin: [{
						required: true,
						message: '请输入微信号',
						trigger: 'blur',
					}, {


						validator: (rule, value, callback) => {

							let reg = /^[0-9a-zA-Z]*$/g
							return reg.test(value);

							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							// return this.$u.test.chinese(value);
						},
						message: '微信号只能包含字母或数字',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change', 'blur'],


					}],
					certificateTypeLable: [{
						required: true,
						message: '请选择证件类型',
						trigger: 'blur',
					}],
					certificateNo: [{
						required: true,
						message: '请输入证件号码',
						trigger: 'blur',
					}],


				},
				border: false,
				actioncertificateTypeList: [],
				addrList: [],
				checked: false,
				cur: '',
				curId: ""
			}
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		components: {
			gppDatePicker
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {
			// 获取性别
			this.getallGenders()
			// 查询所有授权区域列表
			this.getallMallAndStore()
			// 证件类型集合
			this.getallCertificateTypes()
			if (e?.id) {
				this.getDetail(e?.id)
			}

		},
		methods: {


			onCancel(e) {
				console.log(e);
			},
			onConfirm(e) {
				this.model.birthday = e.dateValue;
			},


			// 性别集合
			getallGenders() {
				this.$u.api.allGenders()
					.then(res => {
						this.actionGendersList = res.data?.map(r => {
							return {
								value: r.code,
								label: r.name
							}
						})
						// this.comShow = true
					});
			},
			// 选择性别
			GendersConfirm(val) {
				uni.hideKeyboard();
				this.model.genderLable = val[0].label;
				this.model.gender = val[0].value;
			},

			getDetail(id) {
				this.$u.api.joinOrderDetail({
						id
					})
					.then(res => {
						if (res.code == 'ok') {
							this.model = res.data
							this.model.addr = this.model.province + this.model.city
							this.model.certificateTypeLable = this.model.certificateTypeName

							this.fileList1 = this.model?.imageList?.map(r => {
								return {
									url: r
								}
							})
							this.model.genderLable = this.model.genderName
							this.fileList11 = this.model?.imageList
							this.fileList2 = [{
								url: this.model?.weiXinImageUrl
							}]
							this.fileList22 = [this.model?.weiXinImageUrl]

							// this.loadFlag2 =false
							// this.loadFlag =false

						} else {
							uni.showToast({
								icon: "none",
								title: res.msg,
								duration: 3000
							})
						}


					});
			},
			preStepFn() {
				this.firstStep = true
				console.log(this.nextInfo, 44444);
			},
			successUpload1(data, index, lists) {
				let url = data.data;
				this.fileList11.push(url);
			},
			onRemove1(index) {
				this.fileList11.splice(index, 1);
			},

			successUpload2(data, index, lists) {
				let url = data.data;
				this.fileList22.push(url);
			},
			onRemove2(index) {
				this.fileList22.splice(index, 1);
			},
			// 证件类型集合
			getallCertificateTypes() {

				this.$u.api.allCertificateTypes()
					.then(res => {
						this.actioncertificateTypeList = res.data?.map(r => {
							return {
								value: r.code,
								label: r.name
							}
						})
					});
			},
			// 查询所有授权区域列表
			getallMallAndStore() {
				this.$u.api.allMallAndStore()
					.then(res => {
						this.addrList = res.data?.map(item => ({
							value: item.provinceCode,
							label: item.province,
							children: item.storeList.map(store => ({
								value: store.id,
								label: store.city
							}))
						}));
					});
			},

			onchange(lists, name) {
				if (lists.length) {
					this.loadFlag = true
				}
				console.log(lists, name, 333);
			},
			onuploaded(lists, name) {
				if (lists.length) {

					if (!this.model.id) {

						this.fileList11 = lists?.map(r => {
							return r?.response?.data
						})

					} else {
						this.fileList11 = this.fileList1?.map(r => r.url)

					}

					this.fnsub()

				} else {
					this.fnsub()
					// this.btnFlags = true
				}
			},

			onchange2(lists, name) {
				if (lists.length) {
					this.loadFlag2 = true
				}
			},
			onuploaded2(lists, name) {
				if (lists.length) {


					if (!this.model.id) {

						this.fileList22 = lists?.map(r => {
							return r?.response?.data
						})

					} else {
						this.fileList22 = this.fileList2?.map(r => r.url)

					}

					console.log(this.loadFlag2, this.fileList2, 5555555);

					console.log(this.fileList22, 444444);



					this.$refs.uUpload.upload();


				} else {


					uni.showToast({
						icon: 'none',
						title: "请先上传个人微信二维码图片"
					})
				}
			},

			fnsub() {
				let that = this
				let params = JSON.parse(JSON.stringify(this.model))




				let {
					id,
					mallId,
					storeId,
					mobile,
					realName,
					weiXin,
					email,
					certificateType,
					certificateNo,
					contractNo,
					address,
					description,
					gender,
					birthday
				} = params
				let paramsQuery = {};




				let jquery = {
					gender,
					birthday,
					mallId,
					storeId,
					mobile,
					realName,
					weiXin,
					email,
					certificateType,
					certificateNo,
					contractNo,
					address,
					description,
					imageList: this.fileList11,
					weiXinImageUrl: this.fileList22?. [0]
				}







				if (id) {
					paramsQuery = {
						...jquery,
						id
					}
				} else {

					paramsQuery = {
						...jquery
					}
				}

				console.log(paramsQuery, 22338888);
				that.$u.api.joinOrderAdd(paramsQuery)
					.then(res => {
						that.$u.toast(res.msg);
						if (res.code == 'ok') {
							this.curId = res?.data?.id
							this.loadFlag = false
							this.loadFlag2 = false
							this.btnFlags = false
							uni.hideLoading()
							uni.redirectTo({
								url: "/teamPack/joinRecord/detail?id=" + res?.data?.id
							})

						} else {
							this.loadFlag = false
							this.loadFlag2 = false
							this.btnFlags = false
							uni.hideLoading()
							uni.showToast({
								icon: "none",
								title: res.msg,
								duration: 3000
							})
						}


					});

			},



			submit() {


				this.$refs.uForm.validate(valid => {
					if (valid) {

						console.log(this.model.email);

						if (this.model.email) {

							if (!this.$u.test.email(this.model.email)) {
								this.$u.toast('邮箱格式不正确');
								return;
							}

						}

						if (this.loadFlag2) {
							this.$refs.uUpload2.upload();
							uni.showLoading({
								title: '加载中...'
							})
							this.btnFlags = true
						} else {
							this.$refs.uUpload2.upload();
						}



						// let params = JSON.parse(JSON.stringify(this.model))

						// let {
						// 	id,
						// 	mallId,
						// 	storeId,
						// 	mobile,
						// 	realName,
						// 	weiXin,
						// 	email,
						// 	certificateType,
						// 	certificateNo,
						// 	contractNo,
						// 	address,
						// 	description,
						// 	gender,
						// 	birthday
						// } = params
						// let paramsQuery = {};




						// let jquery = {
						// 	gender,
						// 	birthday,
						// 	mallId,
						// 	storeId,
						// 	mobile,
						// 	realName,
						// 	weiXin,
						// 	email,
						// 	certificateType,
						// 	certificateNo,
						// 	contractNo,
						// 	address,
						// 	description,
						// 	imageList: this.fileList11,
						// 	weiXinImageUrl: this.fileList22?. [0]
						// }
						// if (id) {
						// 	paramsQuery = {
						// 		...jquery,
						// 		id
						// 	}
						// } else {

						// 	paramsQuery = {
						// 		...jquery
						// 	}
						// }
						// if (email && !that.$u.test.email(email)) {
						// 	that.$u.toast('邮箱格式不正确');
						// 	return;
						// }
						// console.log(paramsQuery, 22338888);
						// that.$u.api.joinOrderAdd(paramsQuery)
						// 	.then(res => {
						// 		that.$u.toast(res.msg);
						// 		if (res.code == 'ok') {
						// 			this.curId = res?.data?.id
						// 			uni.redirectTo({
						// 				url: "/teamPack/joinRecord/detail?id=" + res?.data?.id
						// 			})

						// 		} else {
						// 			uni.showToast({
						// 				icon: "none",
						// 				title: res.msg,
						// 				duration: 3000
						// 			})
						// 		}


						// 	});
					} else {
						console.log('验证失败');
					}
				});
			},

			confirmAddr(e) {
				this.model.addr = e?. [0]?.label + e?. [1]?.label
				this.model.mallId = e?. [0]?.value
				this.model.storeId = e?. [1]?.value
			},



			certificateTypeLableConfirm(val) {
				this.model.certificateTypeLable = val[0].label;
				this.model.certificateType = val[0].value;
			}

		}
	}
</script>
<style>
	page {
		background: #F6F6F6;
	}
</style>
<style scoped lang="scss">
	/deep/ .u-input__textarea {
		height: 66px !important;
		text-align: left !important;
	}

	.add {
		padding: 24rpx 40rpx 140rpx;

		.writeInfo {
			padding-right: 24rpx;
		}

		/deep/ .u-form-item--left__content--required {
			margin-left: 10rpx !important;
		}

		/deep/ .u-form-item--left__content__label {
			padding-left: 10rpx !important;
		}

		/deep/ .u-input__textarea {
			text-align: left !important;
		}

		.botBox {
			z-index: 998;
			position: fixed;
			left: 40rpx;
			bottom: 90rpx;
			padding-bottom: env(safe-area-inset-bottom);
			right: 40rpx;

			.item1 {
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
			}
		}

		.dif /deep/ .u-border-bottom:after {
			border-bottom-width: 0px !important;
		}

		/deep/ .u-input__input {
			text-align: right;
			// margin-right: 24rpx;
		}

		.btns1 {
			margin: 24rpx 68rpx;
			background: #FA4A53;
			box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}

		.intro1 {
			height: 176rpx;
		}

		.intro {
			margin-top: 24rpx;
			padding: 6rpx 16rpx 0;

			background: #F1F1F1;
			border-radius: 10rpx 10rpx 10rpx 10rpx;



			.dif /deep/ .u-input__input {
				text-align: left !important;
				// margin-right: 24rpx;
			}

			.dif /deep/ textarea,
			.dif uni-textarea {
				height: 60px;
			}

			.max {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(15, 20, 23, 0.4);
				line-height: 28rpx;
				text-align: right;
				padding-bottom: 5rpx;
			}
		}

		.introBox {


			.open {
				margin-bottom: 24rpx;
				margin-top: 20rpx;

				.openstatus {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 33rpx;

					text {}
				}

				.tips {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 20rpx;
					color: rgba(15, 20, 23, 0.4);
					line-height: 23rpx;
					margin-top: 14rpx;
				}
			}

		}

		.please {
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 28rpx;
			color: #808080;
			line-height: 33rpx;
		}

		.really {
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 500;
			font-size: 28rpx;
			color: #0F1417;
			line-height: 33rpx;
		}

		.line {
			flex: 1;
			display: flex;
			padding-right: 24rpx;

			.inp {
				flex: 1;

				.inpCont {
					width: 100%;
					height: 35px;
					text-align: right;
				}
			}

			.more {
				image {
					width: 30rpx;
					height: 30rpx;
					margin-top: 21rpx;
				}
			}
		}


		/deep/ .u-form-item__message {
			text-align: right;
			margin-right: 24rpx;
		}

		/deep/ .u-form-item--left__content--required {
			// left: 88rpx;
		}

		.info {
			margin-bottom: 24rpx;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.tit {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 36rpx;
				color: #0F1417;
				line-height: 42rpx;
			}
		}

		.photos {
			padding: 24rpx 0;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 24rpx;

			.open {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #0F1417;
				line-height: 33rpx;
			}

			.tit {
				margin-bottom: 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					>text:nth-child(1) {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 40rpx;
					}

					>text:nth-child(2) {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(15, 20, 23, 0.4);
						line-height: 28rpx;
					}
				}

				.right {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(15, 20, 23, 0.4);
					line-height: 28rpx;
				}
			}
		}
	}
</style>
